<template>
    <div class="subject-management">
        <el-card class="card" :class="{ 'hover': isHover }" @mouseover="isHover = true" @mouseleave="isHover = false">
            <template #header>
                <div class="card-header">
                    <div class="title">科目管理</div>
                    <el-button class="add-btn" type="primary" @click="editOrAddSubject({})">添加科目</el-button>
                </div>
            </template>
            <el-menu :default-active="activeSchoolYear" class="nav-menu" mode="horizontal" @select="handleSelect">
                <el-menu-item v-for="(schoolYear, index) in schoolYearArr" :key="index" :index="schoolYear"
                    style="font-size:18px">
                    {{ schoolYear }}
                </el-menu-item>
            </el-menu>
            <div v-if="activeSchoolYear" class="subject-list" style="margin-top:20px">
                <div v-for="(subject, index) in selectSubjectsArr" :key="index" class="card-sub"
                    @mouseover="showDeleteIcon(index)" @mouseleave="hideDeleteIcon" @click="goToSubjectDetail(subject)">
                    <div class="card-img"><img src="@/img/sub_pic1.png" /></div>
                    <div class="card-name">{{ subject.subject }}</div>
                    <el-tooltip class="card-info" effect="dark"
                        :content="'学院: ' + subject.academy_name + '，班级: ' + subject.class_name" placement="bottom">
                        <div class="card-info">
                            <div class="left-bottom">
                                <span>学院:{{ subject.academy_name }}</span>
                            </div>
                            <div class="right-bottom">
                                <span>班级:{{ subject.class_name }}</span>
                            </div>
                        </div>
                    </el-tooltip>
                    <span class="edit-icon" @click.stop="editOrAddSubject(subject)">编辑</span>
                    <span class="delete-icon" @click.stop="deleteSubject(subject)">删除</span>


                </div>
            </div>

        </el-card>
        <el-dialog :title="newSubject.id ? '编辑科目' : '添加科目'" v-model="addSubjectDialogVisible"
            :close-on-click-modal="false" :show-close="false">
            <el-form :model="newSubject" :rules="subjectRules" ref="subjectForm">
                <!-- 每行两个表单项 -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="课程编码" prop="code" label-width="100px">
                            <el-input v-model="newSubject.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程性质" prop="quality" label-width="100px">
                            <el-input v-model="newSubject.quality"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 独占一行的表单项 -->
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="课程名称" prop="cName" label-width="100px">
                            <el-input v-model="newSubject.cName" :disabled="newSubject.id ? true : false"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="英文名称" prop="eName" label-width="100px">
                            <el-input v-model="newSubject.eName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 其他表单项 -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="学识学分" prop="creAndHours" label-width="100px">
                            <el-input v-model="newSubject.creAndHours"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="其中实践/实验学识" prop="praHours" label-width="100px">
                            <el-input v-model="newSubject.praHours"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 其他表单项 -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="所教班级" prop="classname" label-width="100px">
                            <el-input v-model="newSubject.classname"
                                :disabled="newSubject.id ? true : false"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所教学院" prop="teacher_unit" label-width="100px">
                            <el-input v-model="newSubject.teacher_unit"
                                :disabled="newSubject.id ? true : false"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 其他表单项 -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="授课语言" prop="language" label-width="100px">
                            <el-input v-model="newSubject.language"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学年" prop="teacher_grade" label-width="100px">
                            <el-select v-model="newSubject.teacher_grade" clearable placeholder="选择当前学年"
                                style="width: 100%">
                                <el-option v-for="item in schoolYearArr" :key="item" :label="item" :value="item"
                                    :disabled="newSubject.id ? true : false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 其他表单项 -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="开课单位" prop="class_unit" label-width="100px">
                            <el-input v-model="newSubject.class_unit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="适用专业" prop="majors" label-width="100px">
                            <el-input v-model="newSubject.majors"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="先修课程" prop="per_class" label-width="100px">
                            <el-input v-model="newSubject.per_class"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="课程网址" prop="class_com" label-width="100px">
                            <el-input v-model="newSubject.class_com"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelAddSubject">取 消</el-button>
                    <el-button type="primary" @click="confirmAddSubject">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { addSubject, getTotalSubject, deleteSubjectInfo, updateSubject, getSubCollegeId, addCourseSubject, deleteCourseSubject, putCourseSubject } from '@/api/subject';
import { getUserCollege, setUpUserCollege, getUserSubjectId } from '@/api/person';
import { getCourseDes } from '@/api/syllabus.js';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { defineEmits } from 'vue';
import { useUserStore, useClassStore } from '@/stores/index'


const subjectsArr = reactive([])
const isHover = ref(false)
const addSubjectDialogVisible = ref(false)
const schoolYearArr = ref([])//装导航栏上的学年信息，用于显示在页面上
const activeSchoolYear = ref(''); // 当前选中的学年
// const schoolYearArr = ref(['2023-2024第一学期','2023-2024第二学期','2024-2025第一学期','2024-2025第二学期',])
// const activeSchoolYear = ref('2023-2024第一学期'); // 当前选中的学年
const selectSubjectsArr = ref([]); // 当前选中学年的课程列表

// 获取当前学年和学期
const getCurrentSchoolYear = () => {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear(); // 当前年份
    const currentMonth = currentDate.getMonth() + 1; // 当前月份
    console.log('currentYear', currentYear, 'currentMonth', currentMonth);
    let currentSemester = ''; // 当前学期
    if (currentMonth >= 9 && currentMonth <= 2) {
        currentSemester = '第一学期';
    } else if (currentMonth >= 3 && currentMonth <= 8) {
        currentSemester = '第二学期';
    }
    let currentSchoolYear = ''
    // 构造当前学年和学期
    if (currentSemester === '第一学期') {
        currentSchoolYear = `${currentYear - 1}-${currentYear}${currentSemester}`;
        schoolYearArr.value.push(currentSchoolYear)
        //把当前的学年信息赋值，进入页面时则选中学年数据
        activeSchoolYear.value = currentSchoolYear
        currentSchoolYear = `${currentYear - 1}-${currentYear}第二学期`;
        schoolYearArr.value.push(currentSchoolYear)
    } else {
        currentSchoolYear = `${currentYear - 1}-${currentYear}第一学期`;
        schoolYearArr.value.push(currentSchoolYear)
        currentSchoolYear = `${currentYear - 1}-${currentYear}${currentSemester}`;
        schoolYearArr.value.push(currentSchoolYear)
        //把当前的学年信息赋值，进入页面时则选中学年数据
        activeSchoolYear.value = currentSchoolYear

    }
    // const currentSchoolYear = `${currentYear - 1}-${currentYear}${currentSemester}`;
    // console.log('currentSchoolYear',currentSchoolYear);
    // schoolYearArr.value.push(currentSchoolYear)
    //生成往后四个学期
    for (let i = 1; i < 3; i++) {
        for (let j = 1; j <= 2; j++) {
            if (j === 1) {
                const currentSchoolYearNext = `${currentYear}-${currentYear + i}第一学期`;
                schoolYearArr.value.push(currentSchoolYearNext)
            } else {
                const currentSchoolYearNext = `${currentYear}-${currentYear + i}第二学期`;
                schoolYearArr.value.push(currentSchoolYearNext)
            }
        }
    }
    // console.log(schoolYearArr.value);
    // return currentSchoolYear;
}
//获取一下学年信息
getCurrentSchoolYear()

//导航栏事件
const handleSelect = (schoolYear) => {
    // 处理导航栏项的选择，把点击传来的schoolYear赋值
    activeSchoolYear.value = schoolYear;
    // 在这里根据选中的学年加载相应的课程数据
    //第二次点击时清空之前学年的科目数据
    selectSubjectsArr.value = []
    // 清空课程列表，从后端获取数据数据后
    //遍历科目数组，把和当前选中的一样的学年给selectSubjectsArr数组，用于页面展示
    subjectsArr.forEach((res) => {
        if (res.grade_name === activeSchoolYear.value) {
            selectSubjectsArr.value.push(res);
        }
    })
};

const newSubject = reactive({
    code: '',//课程编码
    quality: '',//课程性质
    cName: '',//课程名称
    eName: '',//课程英文名称
    creAndHours: '',//课程学时学分
    praHours: '',//课程实践学分
    class_unit: '',//课程单位
    majors: '',//课程适用专业
    per_class: '',//先修课程
    class_com: '',//课程网址
    language: '',//授课语言
    teacher_unit: '',//所教学院
    teacher_grade: '',//所教学年
    classname: '',//所教班级
    // name: '',
    subject_id: 0,//课程id
    user_id: 0,//用户id
})

const num = ref(0)

const clearData = () => {
    newSubject.code = '';
    newSubject.quality = '';
    newSubject.cName = '';
    newSubject.eName = '';
    newSubject.creAndHours = '';
    newSubject.praHours = '';
    newSubject.class_unit = '';
    newSubject.majors = '';
    newSubject.per_class = '';
    newSubject.class_com = '';
    newSubject.language = '';
    newSubject.teacher_unit = '',//所教学院
        newSubject.teacher_grade = '',//所教学年
        newSubject.classname = '',//所教班级
        newSubject.subject_id = 0;//科目id
    newSubject.id = 0;//id
}

const addSubjectDialogVisible1 = ref(false)

//用来判断是否满足规则
const subjectForm = ref('')
//规则
const subjectRules = ref({
    // code: [
    //     { required: true, message: '请输入课程编码', trigger: 'blur' }
    // ],
    // quality: [
    //     { required: true, message: '请输入课程性质', trigger: 'blur' }
    // ],
    cName: [
        { required: true, message: '请输入课程名称', trigger: 'blur' }
    ],
    // eName: [
    //     { required: true, message: '请输入英文名称', trigger: 'blur' }
    // ],
    // creAndHours: [
    //     { required: true, message: '请输入学识学分', trigger: 'blur' }
    // ],
    // praHours: [
    //     { required: true, message: '请输入实验/实践学识', trigger: 'blur' }
    // ],
    classname: [
        { required: true, message: '请输入所教班级', trigger: 'blur' },
        { required: true, message: '输入格式为xxxx,xxxx', trigger: 'blur', pattern: /^(?:[0-9]{4}，)*[0-9]{4}$/ },// 正则表达式
    ],
    teacher_unit: [
        { required: true, message: '请输入所教学院', trigger: 'blur' }
    ],
    // language: [
    //     { required: true, message: '请输入授课语言', trigger: 'blur' }
    // ],
    teacher_grade: [
        { required: true, message: '请选择学年', trigger: 'change' }
    ],
    // class_unit: [
    //     { required: true, message: '请输入开课单位', trigger: 'blur' }
    // ],
    // majors: [
    //     { required: true, message: '请输入适用专业', trigger: 'blur' }
    // ],
    // per_class: [
    //     { required: true, message: '请输入先修课程', trigger: 'blur' }
    // ],
    // class_com: [
    //     { required: true, message: '请输入课程网址', trigger: 'blur' }
    // ]
});

//编辑科目
const editOrAddSubject = async (subject) => {
    console.log(subject,'31');
    if (subject.id) {
        //根据user_and_acs_id来获取对应科目的详细数据
        getCourseDes(subject.user_and_acs_id).then(res => {
            console.log(res.data.data,'333');
            const resData = res.data.data[0]
            // 将选定的科目名称填充到编辑表单
            // newSubject.name = subject.subject;
            newSubject.id = subject.id
            newSubject.code = resData.code;
            newSubject.quality = resData.quality;
            newSubject.cName = resData.cName;
            newSubject.eName = resData.eName;
            newSubject.creAndHours = resData.creAndHours;
            newSubject.praHours = resData.praHours;
            newSubject.class_unit = resData.class_unit;
            newSubject.majors = resData.majors;
            newSubject.per_class = resData.per_class;
            newSubject.class_com = resData.class_com;
            newSubject.language = resData.language;
            newSubject.teacher_unit = resData.teacher_unit;//所教学院
            newSubject.teacher_grade = resData.teacher_grade;//所教学年
            newSubject.classname = resData.classname;//所教班级
            newSubject.subject_id = resData.id;//科目id
            // newSubject.id = 0;//id
            newSubject.t_user_and_a_c_s_id = resData.t_user_and_a_c_s_id
        }).catch(err => {
            ElMessage({
                type: 'error',
                message: '错误',
            });
        })
        console.log('new', newSubject);
        // 打开编辑对话框
        addSubjectDialogVisible.value = true;
    } else {
        addSubjectDialogVisible.value = true

    }

};

//删除科目
const deleteSubject = async (subject) => {
    console.log(subject, 'index');
    console.log(subjectsArr.length, 'subjectsArr[i].id');
    const confirmResult = await ElMessageBox.confirm(
        '是否删除',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch(() => {
        ElMessage({
            type: 'info',
            message: '删除取消',
        });
    });
    if (confirmResult === "confirm") {
        // 等待用户点击确认按钮
        try {
            // 异步删除行的操作
            let aimID = -1
            for (let i = 0; i < subjectsArr.length; i++) {
                if (subjectsArr[i].user_and_acs_id === subject.user_and_acs_id) {
                    //相等后将找到的id交给index后退出循环

                    aimID = subjectsArr[i].user_and_acs_id
                    subjectsArr.splice(i, 1)
                    break
                }
            }
            //把删除的id传给后端
            console.log(aimID, 'aimid6666');

            const res = await deleteCourseSubject(aimID)
            //删除成功后执行一次获取页面该学年下的所有科目信息
            handleSelect(subject.grade_name)
            ElMessage({
                type: 'success',
                message: '删除成功',
            });
        } catch (error) {
            console.error(error);
        } finally {
            // resetDeleteConfirm();
        }
    }
    // subjectsArr.value.splice(index, 1)
}

const cancelAddSubject = () => {
    addSubjectDialogVisible.value = false
    clearData()
}

//确认添加科目
const confirmAddSubject = async () => {
    await subjectForm.value.validate()
    console.log('newSubject.id', newSubject.subject_id);
    const data = {
        cName: newSubject.cName,
        code: newSubject.code,//课程编码
        quality: newSubject.quality,//课程性质
        eName: newSubject.eName,//课程英文名称
        creAndHours: newSubject.creAndHours,//课程学时学分
        praHours: newSubject.praHours,//课程实践学分
        class_unit: newSubject.class_unit,//课程单位
        majors: newSubject.majors,//课程适用专业
        per_class: newSubject.per_class,//先修课程
        class_com: newSubject.class_com,//课程网址
        language: newSubject.language,//授课语言
        teacher_unit: newSubject.teacher_unit,//所教学院
        teacher_grade: newSubject.teacher_grade,//所教学年
        classname: newSubject.classname,//所教班级
        user_id: newSubject.user_id,//用户id
    }
    if (!newSubject.subject_id) {
        // const res = await addSubject(data)
        const res = await addCourseSubject(data)
        console.log('res',res.data);
        subjectsArr.push({
            id: res.data.data.subject.sub_id,
            subject: res.data.data.all.cName,
            academy_name: res.data.data.academy.acs_name,
            class_name: res.data.data.class.calss_name,
            grade_name: newSubject.teacher_grade,
            user_and_acs_id: res.data.data.userAndACSid
        })
        // console.log('resdata',res.data);
        //执行一次，把对应学年的科目渲染到页面上
        handleSelect(newSubject.teacher_grade)
        // subjectsArr.splice(subjectsArr.length, 0, res.data.data.subject)
        addSubjectDialogVisible.value = false
        clearData()
        ElMessage({type:'success',message:'科目添加成功'})
        // newSubject.name = ''
        // getSubject()
        //刷新界面
        // location.reload();
    } else {
        // data = {user_and_acs_id: newSubject.user_and_acs_id} 
        // console.log(newSubject.t_user_and_a_c_s_id);
        data.t_user_and_a_c_s_id = newSubject.t_user_and_a_c_s_id
        // console.log('data',data);
        //更新科目数据
        const res = await putCourseSubject(data)
        console.log('res', res);
        if (res.data.code === 200) {
            ElMessage({
                type: 'success',
                message: '编辑成功',
            });
        } else {
            ElMessage({
                type: 'error',
                message: '编辑失败',
            });
        }
        addSubjectDialogVisible.value = false
    }
}

const showDeleteIcon = (index) => {
    // const subjectCard = document.querySelectorAll('.subject-card')[index]
    const subjectCard = document.querySelectorAll('.card-sub')[index]
    const deleteIcon = subjectCard.querySelector('.delete-icon')
    const editIcon = subjectCard.querySelector('.edit-icon')
    deleteIcon.style.visibility = 'visible'
    editIcon.style.visibility = 'visible'
}

const hideDeleteIcon = () => {
    const deleteIcons = document.querySelectorAll('.delete-icon')
    const editIcons = document.querySelectorAll('.edit-icon')
    deleteIcons.forEach(icon => {
        icon.style.visibility = 'hidden'
    })
    editIcons.forEach(icon => {
        icon.style.visibility = 'hidden'
    })
}

//跳转到科目详情页
//班级信息，通过pinia来存大纲id
const classMessage = useClassStore()
const router = useRouter()
import { useSubjectStore } from '@/stores/index'
// import { useSubjectStore } from '../../stores';
const SubjectStore = useSubjectStore()
const goToSubjectDetail = (subject) => {
    console.log('subject', subject);
    // console.log(`跳转到${subject.subject}的详情页`)
    // const router = useRouter()
    // router.push(`/article/manage/${subject.id}`)
    // router.push({path:"/article/manage",params:{subId:subject.id}})
    // console.log(subject.id, '741');
    SubjectStore.toggleISInSubject()
    SubjectStore.currentSubjectId = subject.id
    // console.log("SubjectStore.currentSubjectId", SubjectStore.currentSubjectId);
    router.push({
        // name: 'ArticleManage',
        name: 'Syllabus',
        params: {
            subId: subject.id,
            // classId:subject.user_and_acs_id
        }
    })
    classMessage.classInfo.user_and_acs_id = subject.user_and_acs_id//大纲id
    localStorage.removeItem('current_ACSID');
    localStorage.setItem(`current_ACSID`, JSON.stringify(subject.user_and_acs_id));

    classMessage.classInfo.subId =  subject.id,
    classMessage.classInfo.class_name = subject.class_name
    classMessage.classInfo.grade_name = subject.grade_name
    classMessage.classInfo.subject = subject.subject
    classMessage.classInfo.teaching_academy = subject.academy_name
    // console.log(subject,'subject');
    // emits('isShow',subject.id)
}

//获取全部科目
const getSubject = async () => {
    //获取全部科目
    // const res = await getTotalSubject()
    //根据用户id获取该用户的科目
    console.log();
    const res = await getUserSubjectId(newSubject.user_id)
    console.log(res.data, 'subRes');
    //没有科目则退出
    if (res.data.code === 203) {
        ElMessage({
            type: 'error',
            message: `${res.data.msg}`
        })
        return
    } else {
        console.log(res.data.data);
        const response = res.data.data
        response.forEach((response) => {
            const subjectData = {
                id: response.subject_id,
                subject: response.subject_name,
                academy_name: response.academy_name,//所教课程
                class_name: response.class_name,//上课班级
                grade_name: response.grade_name,//当前学年
                user_and_acs_id: response.user_and_acs_id//大纲id
            }
            subjectsArr.push(subjectData)
        })
        //第一次进入页面时让页面有数据
        subjectsArr.forEach((res) => {
            if (res.grade_name === activeSchoolYear.value) {
                selectSubjectsArr.value.push(res);
            }
        })
    }
}

const route = useRoute(); // 使用 useRoute 钩子获取路由信息
// // 在页面加载时获取路由参数
// const loginResult = route.params.loginResult;
// console.log(route.params);
// if (loginResult) {
//   // 在这里可以访问 loginResult 对象的属性值
//   console.log('登录结果:', loginResult);
// } else {
//   console.log('没有收到登录结果.');
// }

// const userData = JSON.parse(route.query.userData);

// 现在你可以使用 userData 中的数据了
// console.log(userData,'666');

//学院查询
const collegeQuery = async () => {
    console.log('useInfo.userInfo.id', useInfo.userInfo.id);
    console.log('3333');
    const res = await getUserCollege(useInfo.userInfo.id)
    if (res.data.code === 203) {
        await promptForCollege();
    } else {
        const sunRes = await getSubCollegeId(1)
        console.log('sunRes', sunRes);
        const response = sunRes.data.data
        response.subjectidAndName.forEach((response) => {
            const subjectData = {
                id: response.id,
                subject: response.subject
            }
            subjectsArr.push(subjectData)
        })
    }
}

const promptForCollege = async () => {
    await ElMessageBox.prompt('您当前不属于任何学院，请输入对应学院邀请码！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入错误',
    })
        .then(async ({ value }) => {
            console.log(value, 'value');
            const IdData = {
                user_id: useInfo.userInfo.id,
                invitation_code: value,
            };
            const resCollage = await setUpUserCollege(IdData);
            console.log(resCollage.data, 'resCollage.data.data');
            if (resCollage.data.code === 200) {
                ElMessage({
                    type: 'success',
                    message: `输入正确，您的学院为${resCollage.data.msg}`,
                });
                const collageData = resCollage.data.data

                //根据学院id来获取学院的科目
                const sunRes = await getSubCollegeId(1)
                console.log('sunRes', sunRes);
                const response = sunRes.data.data
                response.subjectidAndName.forEach((response) => {
                    const subjectData = {
                        id: response.id,
                        subject: response.subject
                    }
                    subjectsArr.push(subjectData)
                })

            } else {
                ElMessage({
                    type: 'error',
                    message: `${resCollage.data.msg}`,
                });
                // 如果发生错误，递归调用该函数，以再次提示用户输入
                await promptForCollege();
            }
        });
};

//一进入页面就把用户id给页面
const useInfo = useUserStore()

onMounted(async () => {
    //一进入页面就把用户id给页面  
    newSubject.user_id = useInfo.userInfo.id
    if (!num.value) {
        // await collegeQuery()
        getSubject()
    }
})
</script>

<style scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.add-btn {
    margin-top: 20px;
}

.card {
    /* width: 900px; */
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    transition: box-shadow .3s ease;
    box-sizing: border-box;
}

.hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.add-btn {
    margin-right: 0;
}

.subject-list {
    /* display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 50px; */
    width: 100%;
    /* 使每个 card-sub 占据一行的三分之一，并留出一定间距 */

    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* 保证每行三个 card-sub 且它们间距相等 */
}

/* .subject-card {
    box-sizing: border-box;
    position: relative;
    width: 250px;
    height: 220px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 5px 5px 10px #aaaaaa, -5px -5px 10px #ffffff;
    border: 1px solid #939090;
    transition: border .3s ease, box-shadow .3s ease;
    backdrop-filter: blur(8px);
}

.subject-card:hover {
    border: 1px solid #939090;
    box-shadow: 5px 5px 10px rgb(140, 179, 224), -5px -5px 10px #ffffff;
} */

.subject-card {
    width: 330px;
    height: 150px;
    /* background: #2a67b1; */
    /* background: #77aae5; */
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background-image: url('@/img/sub_pic1.png');
    /* 设置背景大小和重复方式 */
    background-size: cover;
    /* 按比例缩放背景图，以完全覆盖容器 */
    background-repeat: no-repeat;
    /* 不重复背景图 */
    /* 其他样式设置 */
    position: relative;
    /* 确保子元素相对于父元素进行定位 */
}

.subject-card .subject-name {
    z-index: 1;
    /* color: white; */
    color: rgb(0, 0, 0);
    font-size: 1.5em;
}

/* .subject-card::before {
    content: '';
    position: absolute;
    width: 300px;
    background-image: linear-gradient(100deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
} */


@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.subject-card::after {
    content: '';
    position: absolute;
    /* background: #234a7d; */
    /* background: #aee1fc; */
    inset: 5px;
    border-radius: 15px;
}

.subject-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    transition: color .3s ease;
}

.minCardBottom {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 16px;
    z-index: 1;
    color: rgb(133, 143, 252)
}

.left-bottom {
    text-align: left;
}

/* .right-bottom {
    text-align: right;
} */

.delete-icon {
    /* width: 40px;
  height: 20px; */
    /* background-color:pink; */
    z-index: 1;
    /* color: white; */
    /* font-size: 14px; */
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    font-size: 16px;
    /* color: #999; */
    color: #000000;
    cursor: pointer;
    visibility: hidden;
    transition: visibility .3s ease;
}

.delete-icon:hover {
    color: red;
}

.edit-icon {
    /* width: 40px;
  height: 20px; */
    /* background-color:pink; */
    z-index: 1;

    /* position: absolute; */
    margin-right: 143px;
    top: 8px;
    left: 8px;
    font-size: 16px;
    /* color: #999; */
    color: #000000;
    cursor: pointer;
    visibility: hidden;
    transition: visibility .3s ease;
    position: absolute;
    cursor: pointer;
}


.edit-icon:hover {
    color: red;
}

.subject-card:hover .subject-name {
    color: rgb(140, 179, 224);
}

.subject-card:hover .delete-icon {
    visibility: visible;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.add-btn {
    margin-top: 20px;
}

.nav-menu {
    font-size: 20px;
}

/* el-form表格文字太长则两行显示 */
:deep().el-form-item__label {
    /* overflow: hidden; */
    /* text-overflow: ellipsis; 可选：超出部分显示省略号 */
    /* white-space: nowrap; */
    white-space: normal;
    /* 设置足够高度来容纳多行文本 */
    /* min-height:10px; 根据需要设置合适的高度 */
    line-height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
}

/* subject card */
/* .card-sub{
    margin:20px;
    background-color:pink;
} */

.card-sub {
    position: relative;
    /* margin-bottom:100px; */
    margin: 0 10px;
    width: calc(33.33% - 25px);
    /* 使每个 card-sub 占据一行的三分之一，并留出一定间距 */
    /* border: 1px solid #b7c9f7; 添加边框样式 */
    margin-bottom: 25px;
    /* 添加下边距，用于控制每行 card-sub 之间的间距 */
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    background-color: rgb(203, 225, 235);
}

.card-img img {
    width: 100%;
    height: auto;
    padding: 1px;
}

.card-name {
    font-size: 23px;
    text-align: center;
    font-family: SimHei;
    /*定义字体*/
}

.card-info {
    display: flex;
    justify-content: space-between;
    word-wrap: break-word;
}

.card-info .left-bottom,
.card-info .right-bottom {
    flex: 1;
    /* 让学院和班级各占据一半的宽度 */
    margin: 0 10px;
    /* word-wrap: break-word; */
    white-space: nowrap;
    /* 确保文本在一行显示 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */

}

.card-info .right-bottom {
    /* width: 20px; */
    text-align: right;
    /* 确保班级信息右对齐 */
    /* margin-right:10px; */
}
</style>
